<template>
	<el-container direction="vertical">
		<SearchForm :columns="formColumn" @search="search" @reset="search" />
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="addCoupon" class="mr10">
					添加优惠卷
				</el-button>
			</div>
		</el-header>

		<el-main class="nopadding">
			<scTable ref="table"
			v-bind="list"
			row-key="id" 
			stripe
			:setUpType="false"
			:hidePropOrder="true"
			:vritualData="vritualData">
				<!-- <el-table-column type="selection" width="50"></el-table-column> -->
				<template #name="scope">
					<el-link :underline="false" type="primary" :href="`#/student/detail/${scope.row.studentId}`">{{ scope.row.name
					}}</el-link>
				</template>
				<el-table-column
					label="操作"
					width="255"
					fixed="right"
					align="center"
				>
					<template #default="scope">
						<el-button
							plain
							size="small"
							@click="editData(scope.row)"
							>编辑</el-button>
						<el-button
							plain
							size="small"
							type="danger"
							@click="stopUser"
							>停用</el-button>
						<el-button
							type="primary"
							plain
							size="small"
							@click="ProvideCouponBtn(scope.row)"
							>发放优惠券</el-button>
					</template>
				</el-table-column>
			</scTable>
		</el-main>

		<div class="dialog_div">
			<el-dialog
				v-model="dialogVisible"
				:title="dialogTips"
				width="40%"
			>
				<component :is="isComponets" @confirm="confirm" @cancel="cancel"/>
			</el-dialog>
		</div>
	</el-container>
</template>
<script>
import AddClass from "./addCoupon/index.vue";
import ProvideCoupon from "./provideCoupon/provideCoupon.vue";
import SearchForm from "@/components/SearchForm/index.vue";
import { formColumn, column } from "./date";
import { ElMessage, ElMessageBox  } from 'element-plus'
export default {
	data() {
		return {
			formColumn,
			list: {
				apiObj: null,
				params: {},
				column,
			},
			vritualData: [
				{
					id: 1,
					couponName: '美甲优惠',
					status: '启用',
					preferentialWay: '直减',
					couponPrice: '250',
					termOfValidity: '2022-05-12-2022-05-15',
					couponType: '通用优惠券',
					createName: '新生',
					createTime: '2022-04-24 15:21:23',
				},
				{
					id: 2,
					couponName: '纹绣优惠',
					status: '启用',
					preferentialWay: '直减',
					couponPrice: '250',
					termOfValidity: '2022-02-12-2022-03-23',
					couponType: '通用优惠券',
					createName: '新生',
					createTime: '2022-03-24 16:21:23',
				},
				{
					id: 3,
					couponName: '纹绣优惠',
					status: '停用',
					preferentialWay: '直减',
					couponPrice: '250',
					termOfValidity: '2022-02-12-2022-03-23',
					couponType: '通用优惠券',
					createName: '老生',
					createTime: '2022-03-24 16:21:23',
				}
			],
			dialogVisible: false,
			dialogTips: "添加优惠券",
			isComponets: "AddClass"
		}
	},
	components: {
		SearchForm,
		AddClass,
		ProvideCoupon
	},
	methods: {
		stopUser() {
			ElMessageBox.confirm('确定要停用吗?','提示',
    	 	{
    	 	  confirmButtonText: '确定',
    	 	  cancelButtonText: '取消',
					buttonSize: "small"
    	 	}
 			).then(() => {
      	ElMessage({
      	  type: 'success',
      	  message: '删除成功'
      	})
			}).catch(() => {})
		},
		confirm(data) {
			data.id = this.vritualData.length + 1
			data.termOfValidity = data.termOfValidity[0] + '-' + data.termOfValidity[1]
			this.vritualData.push(data)
			this.dialogVisible = false
		},
		cancel() {
			this.dialogVisible = false
		},
		addCoupon() {
			this.isComponets = "AddClass" 
			this.dialogTips = "添加优惠券"
			this.dialogVisible = true
		},

		editData(row) {
			this.dialogTips = "编辑优惠券"
			this.dialogVisible = true
		},
		// 发放优惠券
		ProvideCouponBtn(row) {
			this.isComponets = "ProvideCoupon" 
			this.dialogTips = "发放" + row.couponType
			this.dialogVisible = true
		},
		search(searchParams) {
			const params = Object.assign({}, this.list.params, searchParams);
			this.$refs.table.reload(params);
		},
		addStudent() {
			this.visible = true;
		},
	},
}
</script>
<style lang="scss" scoped>
.mr10 {
	margin-right: 10px;
}

.dialog_div {
	::v-deep .el-dialog__body{
		border-top: 1px #cfcfcf solid;
		padding: 0;
		padding-top: 20px;
	}
}
</style>